<!-- fileName: Carousel -->
<template>
  <div class="carousel-box">
    <div class="carousel">
      <el-carousel :interval="5000000" height="200px" style="width: 100%" type="card">
        <el-carousel-item :key="index" style="overflow: hidden; border-radius: 8px;"
                          v-for="(item, index) in banner">
          <img :src="item.imageUrl + '?param=650y220'" @click="handleCarouselItemClick(item)"
               style="width: 100%; height: 100%;"/>
          <div :style="getColorByType(item.titleColor)" class="bannerTitle">
          <span>
            {{ item.typeTitle }}
          </span>
          </div>
        </el-carousel-item>
      </el-carousel>

    </div>
  </div>
</template>

<script lang="ts">

  import { discoverApi } from '@/api/discover'

  export default {
    data() {
      return {
        banner: []
      }
    },
    created() {
      this.getBannerList()
    },
    methods: {
      handleCarouselItemClick(item) {
        switch (item.targetType) {
          case 10: {
            return
            // 去往专辑页
            // this.$router.push(`/playlist/${item.targetId}`)
          }
        }
        console.log(item)
      },
      getColorByType(titleColor) {
        const colorObj = { backgroundColor: '' }
        switch (titleColor) {
          case 'red':
            colorObj.backgroundColor = '#CC4A4A'
            break
          case 'blue':
            colorObj.backgroundColor = '#4A79CC'
            break
        }
        return colorObj
      },

      getBannerList() {
        discoverApi().getBanner().then(res => {
          this.banner = res.banners
        })
      }
    },
    mounted() {
    }
  }
</script>

<style lang="less" scoped>

  .carousel-box {
    display: flex;
    justify-content: center;
  }

  .carousel {
    text-align: center;
    padding-right: 10px;
    width: 960px;
  }

  .bannerTitle {
    height: 22px;
    position: absolute;
    bottom: 0;
    z-index: 5;
    right: 0;
    background-color: #CC4A4A;
    padding: 0 10px;
    border-top-left-radius: 8px;
  }

  .bannerTitle > span {
    font-size: 11px;
    color: rgba(255, 255, 255, 1);
  }

  .el-carousel__item.is-active {
    width: 68% !important;
    aspect-ratio: 4/3;
    transform: translateX(23.5%) scale(1) !important;
  }

  :deep(.el-carousel__indicators--outside button) {
    width: 7px;
    height: 7px;
    border-radius: 50px;
    background-color: #000;
    transition: 0s all;
  }

  :deep(.el-carousel__indicator.is-active button) {
    background-color: #EC4141;
  }
</style>
